<template>
  <div class="invalid-product-dialog">

    <el-dialog
        v-model="dialogVisible"
        :before-close="handleClose"
        title="作废代理产品"
        width="850px"
    >

      <el-form
          :inline="true"
          class="demo-ruleForm"
          label-width="100px"
      >
        <el-row>

          <el-col :span="12">
            <el-form-item label="编号">
              {{ formData.agentProductNumber }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="产品名称">
              {{ formData.productPopularName }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="批准文号">
              <span>{{ formData.approvalNumber }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="包装规格">
              <span>{{ formData.packSpecs }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="可营销终端">
              {{ getLabel('app_mode', formData.terminalType) }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="代理属性" prop="agentAttribute">
              {{ getLabel(type == 'agent' ? 'agent' : 'agent_person', formData.agentAttribute) }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="代理地区" prop="areas">
              <area-list-view :areas="formData.region"/>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="交易价" prop="tradePrice">

              ¥{{ formData.tradePrice }}

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="代理期限至">
              {{ dateFormat('yyyy-mm-dd', formData.agentEndTime) }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :prop="formData.agentAttribute == 1 ? 'minSale' :''" label="最低销量">

              {{ formData.minSale }}{{
                getLabel('sell_unit', formData.sellUnit)
              }}/{{ getLabel('sell_num_unit', formData.minSaleUnit) }}

            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item :prop="formData.agentAttribute == 1 ? 'minSalePromise' :''" label="销量保证金">
              ¥{{ formData.minSalePromise }}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="负责营销职员" prop="headId">
              {{ formData.headName }}
            </el-form-item>
          </el-col>

        </el-row>

      </el-form>
      <el-form
          ref="ruleForm"
          :model="formData"
          :rules="rules"
          class="demo-ruleForm"
          label-width="100px"
      >
        <el-form-item label="作废原因" prop="banReason">
          <el-input v-model="formData.banReason" placeholder="请输入作废原因"/>
        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="dialogConfirm">提交审核</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {defineComponent, getCurrentInstance, inject, reactive, ref, toRefs} from 'vue'

export default defineComponent({
  name: 'InvalidProductDialog',
  setup(props, {emit}) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const rules = ref({
      banReason: [
        {
          required: true,
          message: '请输入作废原因',
          trigger: 'blur',
        },
      ],
    })

    var ruleForm = ref(null)
    var dialogVisible = ref(false)

    var data = reactive({
      formData: {
        productId: 0,
        productPopularName: '',
        approvalNumber: '',
        packSpecs: '',
        sellUnit: '',
        terminalType: '', // 终端客户类型
        agentAttribute: '', // 代理属
        area: [],
        region: [],
        tradePrice: 0, // 交易价
        agentEndTime: '', // 代理结束时间
        minSale: 0, // 最低销量
        minSaleUnit: '1', // 最低销量单位
        minSalePromise: 0, // 销量保证金
        headName: '张三',
        headId: 1,
        remark: '', // 其他约定
        agentId: 0, // 代理商id
        contractId: 0, // 合同id
        banReason: ''
      }

    })

    const dialogConfirm = (a) => {
      currentInstance.proxy
          .alertBox({
            message: '是否确认作废该产品与价格？',
            title: '作废',
          })
          .then(() => {
            ruleForm.value.validate((val) => {
              if (val) {
                api.signedAgent.AGENT_PRODUCT_BAN(data.formData).then(res => {
                  if (!res.code) {
                    currentInstance.proxy.customMessage({
                      type: 'success',
                      message: '操作成功',
                    })
                    emit('success')
                    handleClose()
                  } else {
                    currentInstance.proxy.customMessage({
                      type: 'error',
                      message: res.msg,
                    })
                  }
                })
              }
            })
          })
          .catch((err) => {
            console.log(err)
          })
    }

    const handleClose = () => {
      dialogVisible.value = false
      setTimeout(() => {
        ruleForm.value.resetFields()
        ruleForm.value.clearValidate()
      }, 100)
    }

    const openDialog = (a) => {
      a.banReason = ''
      data.formData = a

      dialogVisible.value = true
    }

    return {
      ruleForm,
      dialogVisible,
      ...toRefs(data),
      rules,

      dialogConfirm,
      handleClose,
      openDialog,
    }
  }
})
</script>

<style scoped>

</style>
